<template>
	<view class='page'>
		<view class="nav">
			
		  <view v-for="(vo,index) in category" :key="index" @click="qiehuan(vo.id)">
		    <image src="../../static/images/job1.png"></image>
		    <view>{{vo.name}}</view>
		  </view>
		  
		  
		</view>
    <navigator v-for="(vo,index) in goods" :key="index" class='job' @click="gotodetail(vo.id)">
      <image src="../../static/images/logo.png" class="job-thumb"></image>
      <view>
        <view class='job-title one-overflow'>{{vo.post_title}}</view>
        <view>
          <text class="color-red">{{vo.salary}}</text>
         <!-- <text class='color-gray g-ml-5 g-mr-5'>|</text>
          <text class='color-gray font-14'>当天结算</text> -->
        </view>
        <view>
          <!-- <text class="color-gray font-14">全市</text>
          <text class='color-gray font-14 g-ml-5 g-mr-5'>|</text>
          <text class='color-gray font-14'>当天结算</text> -->
        </view>
      </view>
    </navigator>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				category:[],
				goods:[]
			};
		},
		onLoad() {
			this.getcate()
		},
		methods: {
			qiehuan:function(id){
				this.getgoods(id)
			},
			getcate:function(){
				uni.request({
				    url: this.$url + "inf/user/getAllClassification",
				    success: (res) => {
				        if(res.data.code == 200){
							this.category = res.data.data
						}
						console.log(res.data.data)
						this.getgoods(res.data.data[0].id)
				    }
				});
			},
			gotodetail:function(id){
				uni.navigateTo({
				    url: "../detail/detail?id=" + id
				});
			},
			
			getgoods:function(id){
				uni.request({
				    url: this.$url + "inf/user/getAllPostByType",
					data:{
						type:id
					},
				    success: (res) => {
				        if(res.data.code == 200){
							this.goods = res.data.data
						}
						
				    }
				});
			},
			
		},
		
		onPullDownRefresh() {
		  uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss">
  .job-thumb {
    width: 99upx;
    height: 99upx;
    border-radius: 100px;
    margin-right: 10px;
  }
  .page {
    padding: 0 15px;
    padding-top: var(--status-bar-height);
  }
  .nav {
    display: flex;
    margin: 20px 0;
  
    >view {
      flex: 1;
      font-size: 14px;
      text-align: center;
    }
  
    image {
      width: 117upx;
      height: 117upx;
      margin-bottom: 5px;
    }
  }
  .job {
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
    margin-bottom: 10px;
    .job-title {width: 560upx}
  }
</style>
